import React, { Component } from 'react'
import { getAdminList, deleteAdmin } from '../../api/admin'
import { Table, Space, Button, Tag, Popconfirm } from 'antd'
class AdminList extends Component {
  state = {
    adminList: []
  }
  columns = [
    {
      title: '序号', render: (text,record, index) => { 
        console.log(this)
        return <span>{ index + 1}</span>
      }
    },
    {
      title: '账号', dataIndex: 'adminname'
    },
    {
      title: '角色', dataIndex: 'role', render: (text) => {
        return text === 2 ? 
        <Tag color="green">超级管理员</Tag> : 
        <Tag color="geekblue">管理员</Tag>
      }
    },
    {
      title: '操作', render: (text, record) => { // 不实用箭头函数，this为undefined
        return (<Space>
          <Button type="ghost">编辑</Button>
          <Popconfirm
            title="确定删除吗？"
            onConfirm={() => {
              deleteAdmin({
                adminid: record.adminid
              }).then(() => {
                getAdminList().then(res => {
                  console.log(res.data.data)
                  this.setState({
                    adminList: res.data.data
                  })
                })
              })
            }}
            onCancel={() => {}}
            okText="确定"
            cancelText="取消"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </Space>)
      }
    }
  ]
  componentDidMount () {
    getAdminList().then(res => {
      console.log(res.data.data)
      this.setState({
        adminList: res.data.data
      })
    })
  }
  render() {
    return (
      <div>
        <Table 
        dataSource = { this.state.adminList } 
        columns = { this.columns } 
        rowKey="adminid"/>
      </div>
    )
  }
}
export default AdminList
